<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function $$(id){
				return document.getElementById(id)
			}
			window.onload = function(){
			  var cnv = $$("canvas")
			  var cxt = cnv.getContext("2d");
			  //圆开始路径
			  cxt.beginPath();
			  //绘制最外层的大圆
			  cxt.arc(100, 100, 75, Math.PI / 180 * 0, Math.PI / 180 * 360);
			  //将大圆填充为黑色
			  cxt.fillStyle = 'black';
			  cxt.fill();
			  //绘制左半圆
			  cxt.beginPath();
			  cxt.arc(100,100, 75, Math.PI / 180 * 90, Math.PI / 180 * 270);
			  cxt.fillStyle = 'red';
			  cxt.fill(); 
			  //绘制左上半圆
			  cxt.beginPath();
			  cxt.arc(100, 63, 37, Math.PI / 180 * 90, Math.PI / 180 * 270);
			  cxt.fillStyle = 'black';
			  cxt.fill(); 
			  //绘制右下半圆
			  cxt.beginPath();
			  cxt.arc(100, 138, 37, Math.PI / 180 * 270, Math.PI / 180 * 90);
			  cxt.fillStyle = 'red';
			  cxt.fill(); 
			  //绘制左上小半圆
			  cxt.beginPath();
			  cxt.arc(100, 63, 17, Math.PI / 180 * 0, Math.PI / 180 * 360);
			  cxt.fillStyle = 'red';
			  cxt.fill(); 
			  //绘制右下小半圆
			  cxt.beginPath();
			  cxt.arc(100, 138, 17, Math.PI / 180 * 0, Math.PI / 180 * 360);
			  cxt.fillStyle = "black";
			  cxt.fill(); 
			}
		</script>
	</head>
	<body>
		<canvas id="canvas"width="200"height="200"style="border:1px dashed gray;"></canvas>
	</body>
</html>
